<script setup>
import { message } from 'ant-design-vue';
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { getInboundList, deleteInbound } from '@/service/services.js';
import dayjs from 'dayjs';
import { useAccountStore } from '@/stores/account.js';
const account = useAccountStore();
const tableHeight = ref(0);
const name = ref('');
const code = ref('');
const remark = ref('');
const searchDate = ref([]);
const id = ref('');
const open = ref(false);
const data = ref([]);
const page = ref(1);
const pageSize = ref(15);
const totals = ref(1);
const pageSizeChange = (current, size) => {
	page.value = current;
	pageSize.value = size;
	getInfo();
};
const pageChange = (current, size) => {
	page.value = current;
	pageSize.value = size;
	getInfo();
};
const pagination = ref({
	// 表格分页的配置
	pageSize,
	current: page,
	total: totals,
	showTotal: (totals) => `共 ${totals} 条`,
	onShowSizeChange: pageSizeChange,
	onChange: pageChange
});
const columns = [
	{
		title: '操作',
		key: 'operation',
		fixed: 'left',
		width: 180
	},
	{
		title: '日期',
		dataIndex: 'inboundDate',
		key: 'inboundDate',
		width: 120,
		fixed: 'left'
	},
	{
		title: '产品编码',
		dataIndex: 'productCode',
		key: 'productCode',
		fixed: 'left'
	},
	{
		title: '类别',
		dataIndex: 'productType',
		key: 'productType',
		fixed: 'left',
		width: 100
	},
	{
		title: '产品名称',
		dataIndex: 'productName',
		key: 'productName',
		fixed: 'left'
	},
	{
		title: '规格型号',
		dataIndex: 'var1',
		key: 'var1',
		fixed: 'left',
		width: 100
	},
	{
		title: '单位',
		dataIndex: 'var2',
		key: 'var2',
		fixed: 'left',
		width: 80
	},
	{
		title: '单户用量',
		dataIndex: 'var3',
		key: 'var3'
	},
	{
		title: '单层用量',
		dataIndex: 'var4',
		key: 'var4'
	},
	{
		title: '首层用量',
		dataIndex: 'var5',
		key: 'var5'
	},
	{
		title: '单价',
		dataIndex: 'price',
		key: 'price'
	},
	{
		title: '入库数量',
		dataIndex: 'total',
		key: 'total'
	},
	{
		title: '总用量',
		dataIndex: 'totalUseNum',
		key: 'totalUseNum'
	},
	{
		title: '金额',
		dataIndex: 'amount',
		key: 'amount'
	},
	{
		title: '是否到货',
		dataIndex: 'flag',
		key: 'flag'
	},
	{
		title: '供应商',
		dataIndex: 'vendor',
		key: 'vendor',
		ellipsis: true
	},
	// {
	//   title: "仓库名称",
	//   dataIndex: "warehouseName",
	//   key: "warehouseName",
	//   ellipsis: true,
	// },
	{
		title: '是否已付款',
		dataIndex: 'payFlag',
		key: 'payFlag',
		ellipsis: true
	},
	{
		title: '备注',
		dataIndex: 'remark',
		key: 'remark'
	}
];
const router = useRouter();
const getInfo = () => {
	account.spinning = true;
	getInboundList({
		startDate: searchDate.value[0]
			? dayjs(searchDate.value[0]).format('YYYY-MM-DD')
			: '',
		endDate: searchDate.value[1]
			? dayjs(searchDate.value[1]).format('YYYY-MM-DD')
			: '',
		productName: name.value,
		productCode: code.value,
		remark: remark.value,
		pageNum: page.value,
		pageSize: pageSize.value
	})
		.then((res) => {
			data.value = res.list;
			totals.value = res.total;
			account.spinning = false;
		})
		.catch((err) => {
			account.spinning = false;
			message.error(err);
		});
};
onMounted(() => {
	tableHeight.value = document.getElementById('main').offsetHeight - 220;
	getInfo();
	// 模糊查询条件
	// startDate--endDate	入库时间段，界面上可以选个范围
	// productType	产品类型
	// productName	产品名称
	// productCode	产品类型
	// vendor	供应商
	// remark	备注
});
watch(
	() => account.currentPrograme,
	(_val, oldVal) => {
		getInfo();
	}
);
const onSearch = () => {
	console.log(searchDate.value);
	getInfo();
};
const del = (i) => {
	id.value = i.id;
	open.value = true;
};
const handleOk = () => {
	account.spinning = true;
	deleteInbound({ id: id.value })
		.then((res) => {
			open.value = false;
			getInfo();
		})
		.catch((err) => {
			message.error(err);
			account.spinning = false;
		});
};
const edit = (i) => {
	console.log(i);
	router.push({ path: '/main/inbound/edit', query: i });
};
const add = () => {
	router.push({ path: '/main/inbound/edit' });
};
const exportFile = () => {
	window.location.href = `${
		window.origin
	}/services/inbound/export?token=${sessionStorage.getItem(
		'token'
	)}&productName=${name.value}&productCode=${code.value}&startDate=${
		searchDate.value[0] ? dayjs(searchDate.value[0]).format('YYYY-MM-DD') : ''
	}&endDate=${
		searchDate.value[1] ? dayjs(searchDate.value[1]).format('YYYY-MM-DD') : ''
	}`;
};
</script>

<template>
	<section class="operation">
		<section class="search">
			<a-input
				v-model:value="name"
				placeholder="请输入产品名称"
				@pressEnter="onSearch"
				:style="{ width: '150px' }"
			/>
			<a-input
				v-model:value="code"
				placeholder="请输入产品编码"
				@pressEnter="onSearch"
				:style="{ marginLeft: '10px', width: '150px' }"
			/>
			<a-input
				v-model:value="remark"
				placeholder="请输入备注"
				@pressEnter="onSearch"
				:style="{ marginLeft: '10px', width: '150px' }"
			/>
			<a-range-picker
				v-model:value="searchDate"
				@pressEnter="onSearch"
				:style="{ marginLeft: '10px', width: '250px' }"
			/>
		</section>
		<section>
			<a-button type="primary" @click="onSearch">查询</a-button>
			<a-button
				type="primary"
				@click="add"
				:style="{ marginLeft: '10px', marginRight: '10px' }"
				>新增</a-button
			>
			<a-button type="primary" @click="exportFile">导出</a-button>
		</section>
	</section>
	<a-table
		:columns="columns"
		:data-source="data"
		:scroll="{ x: 3000, y: tableHeight }"
		:pagination="pagination"
	>
		<template #bodyCell="{ column, record }">
			<template v-if="column.key === 'operation'">
				<section class="col">
					<a-button
						type="primary"
						ghost
						:disabled="account.level === '3'"
						:style="{ marginRight: '10px' }"
						@click="edit(record)"
						>修改</a-button
					>
					<a-button
						type="primary"
						danger
						ghost
						@click="del(record)"
						:disabled="account.level === '3'"
						>删除</a-button
					>
				</section>
			</template>
		</template>
	</a-table>
	<a-modal
		v-model:open="open"
		title="删除"
		centered
		@ok="handleOk"
		@cancel="open = false"
		okText="确认"
		cancelText="取消"
		:closable="false"
		:keyboard="false"
		:maskClosable="false"
	>
		<p>确认删除该条数据？</p>
	</a-modal>
</template>

<style scoped>
.search {
	display: flex;
}
.operation {
	display: flex;
	align-content: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.col {
	display: flex;
	align-content: center;
	justify-content: space-between;
}
</style>
